<script setup lang="ts">
//


import type {PayProductsData} from "@/api/products/types";
import {publicUrl} from "@/stores";


defineProps<{
  categoryList?: PayProductsData[]
}>()
</script>

<template>
  <view class="category">
    <navigator
        class="category-item"
        hover-class="none"
        :url="`/pages/goods/goods?id=${item.id}`"
        v-for="item in categoryList"
        :key="item.id"
    >
      <image class="icon" :src="publicUrl+item.photo"></image>
      <text class="text">{{ item.name }}</text>
      <text class="text" style="color: orangered">￥{{ item.price?.toFixed(2) }}</text>
    </navigator>
  </view>
</template>

<style scoped lang="scss">
/* 前台类目 */
.category {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 328rpx;
  justify-content: space-evenly;

  .category-item {
    width: 200rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    margin-bottom: 10rpx;

    .icon {
      width: 200rpx;
      height: 200rpx;
    }

    .text {
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>
